$(function () {
    // 0 定义一个全局变量  获取文章列表数据 的 参数 
    let Params = {
        // string	搜索关键词，可以为空，为空返回某类型所有文章
        key: "",
        // string	文章类型id，可以为空，为空返回所有类型文章
        type: "",
        // string	文章状态，草稿 ，已发布,为空返回所有状态文章
        state: "",
        // number	当前页，为空返回第1页
        page: 1,
        // number	每页显示条数，为空默认每页6条
        perpage: 10
    }
    // 1页面渲染
    function getArticleQuery() {
        // 获取数据.为空默认数据
        $.get('/admin/article/query', Params, function (res) {
            // console.log(res.data.data);
            const list = res.data.data;
            //使用template渲染数据
            const html = template('articleLists', { list });
            $('.table-hover tbody').html(html)

            totalCount = res.data.totalCount
            renderPager();
        })
    }

    // 2 发送请求 动态渲染文章分类 下拉框
    function getCategorytList() {
        $.get('/admin/category/list', function (res) {
            // const list = res.data;
            // const html = template('typeIdLists', { list })
            let html = "<option value=''>所有分类</option>";
            res.data.forEach((item) => {
                html += `<option value="${item.id}" >${item.name}</option>`;
            })
            $('#selCategory').html(html)
        })
    }

    // 3 筛选按钮
    $("#btnSearch").click(function () {

        Params.page = 1
        // 3.1 获取表单的值
        Params.key = $("#aname").val().trim(); // 获取输入框
        Params.type = $("#selCategory").val(); //  获取下拉列表id  文章分类
        Params.state = $("#selStatus").val();// 获取下拉列表 状态 值
        // 3.2 发送请求
        getArticleQuery();
    })

    // 4 重置 
    $(".btn-reset").click(function () {
        //  4.1 重置 表单 组件
        $("#aname").val("");
        $("#selCategory").val("");
        $("#selStatus").val("");

        // 4.2 重置 接口参数

        Params.key = "";
        Params.type = "";
        Params.state = "";

        // 4.3  重新发送请求 来渲染页面 
        getArticleQuery();
    })

    // 5 渲染分页组件
    function renderPager() {
        layui.laypage.render({
            elem: 'pager',
            count: totalCount, //数据总数，从服务端得到
            limit: Params.perpage,
            curr: Params.page,
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    //do something
                    // 给全局参数赋值
                    Params.page = obj.curr;
                    // 重新发送一次请求获取对应页码数据
                    getArticleQuery();
                    // 存在bug 每一次点击 页码都重新变回1 
                }
            }
        });

    }
    //1.文章渲染
    getArticleQuery();
    //2 发送请求 动态渲染文章分类 下拉框
    getCategorytList();

})

















// $(function () {
//     // 页面渲染
//     function getArticleList() {
//         $.get('/admin/article/query', { perpage: 6 }, function (res) {
//             const list = res.data.data;
//             // console.log(res.data);
//             const html = template('articleLists', { list });
//             $('.table-hover tbody').html(html)
//         })
//     }
//     getArticleList();

//     //分类循环
//     function typeIdLists() {
//         $.get('/admin/category/list', function (res) {
//             // console.log(res);
//             const list = res.data;
//             // console.log(list);
//             const html = template('typeIdLists', { list });
//             $('#selCategory').html(html)
//         })
//     }
//     typeIdLists();



//     // 按条件筛选
//     $('#btnSearch').click(function () {
//         const key = $('#aname').val().trim();
//         const type = $('#selCategory').val();
//         const state = $('#selStatus').val();
//         const page = 1
//         console.log(key, type, state);
//         $.get('/admin/article/query', { key, type, state, page }, function (res) {
//             console.log(res);
//             // console.log(res.data);
//             const list = res.data.data;
//             const html = template('articleLists', { list });
//             $('.table-hover tbody').html(html)
//         })
//     })
//     //重置按钮
//     $('.btn-reset').click(function () {
//         $('#aname').val('');
//         $('#selCategory').val('');
//         $('#selStatus').val('');
//         getArticleList();
//     })

//     // 删除
//     $('.table-hover').on('click', '.delete', function () {
//         const id = $(this).data('id')
//         layer.confirm('是否要删除', { icon: 3, title: '提示' }, function (index) {
//             // console.log(id);
//             // do something
//             // 发送删除命令post 网址接口  id  回调函数
//             $.post('/admin/article/delete', { id }, function () {
//                 getArticleList();
//                 layer.msg('删除成功');
//                 layer.close(index);
//             })
//         });
//     })

//     //编辑
//     $('.table-hover').on('click', '.btn-default', function () {
//         const id = $(this).data('id');
//         localStorage.setItem('id', id)
//     })

//     // 页数分类循环
//     function paginationList() {

//         $.get('/admin/article/query', function (res) {
//             // 获取文章总页数
//             let list = res.data.totalPage;
//             console.log(list);
//             // 使用for循环渲染
//             let html = `<li class="page-item prev "><a href="#" class="page-link">上一页</a></li>`
//             for (let i = 1; i <= list; i++) {
//                 html += `<li class="page-item paginationlist" data-page="${i}"><a href="#" class="page-link">${i}</a></li>`
//             }
//             html += `<li class="page-item next"><a href="#" class="page-link">下一页</a></li>`
//             $('.pagination').html(html)

//             // 后台数据显示页数界面默认为1
//             let page = 1
//             // 默认选中第一页增加active
//             $('.paginationlist').eq(page - 1).addClass('active')
//             // 下一页点击事件
//             $('.next').click(function () {
//                 const key = $('#aname').val().trim();
//                 const type = $('#selCategory').val();
//                 const state = $('#selStatus').val();
//                 page++
//                 if (page == list + 1) {
//                     console.log(2);
//                     page = 1

//                 }
//                 $('.paginationlist').eq(page - 1).addClass('active').siblings().removeClass('active')
//                 $.get('/admin/article/query', { key, type, state, page }, function (res) {
//                     const list = res.data.data;
//                     const html = template('articleLists', { list });
//                     $('.table-hover tbody').html(html)
//                 })
//             })

//             $('.prev').click(function () {
//                 console.log(1);
//                 const key = $('#aname').val().trim();
//                 const type = $('#selCategory').val();
//                 const state = $('#selStatus').val();
//                 page--
//                 if (page == 0) {
//                     page = list
//                 }
//                 $('.paginationlist').eq(page - 1).addClass('active').siblings().removeClass('active')
//                 $.get('/admin/article/query', { key, type, state, page }, function (res) {
//                     // console.log(res);
//                     // console.log(res.data);
//                     const list = res.data.data;
//                     const html = template('articleLists', { list });
//                     $('.table-hover tbody').html(html)
//                 })
//             })

//             let paginationlist = document.querySelectorAll('.paginationlist')
//             for (let i = 0; i < paginationlist.length; i++) {
//                 paginationlist[i].addEventListener('mouseover', function () {
//                     $('.paginationlist').eq(i).addClass('active').siblings().removeClass('active')

//                 })
//             }
//             // for (let i = 0; i < paginationlist.length; i++) {
//             //     paginationlist[i].addEventListener('mouseout', function () {
//             //         $('.paginationlist').eq(i).removeClass('active')
//             //     })
//             // }

//             $('.pagination').on('click', '.paginationlist', function () {
//                 const page = $(this).data('page');
//                 console.log(page);

//                 $('.paginationlist').eq(page).addClass('active')
//                 $.get('/admin/article/query', { page }, function (res) {
//                     // console.log(res);
//                     // console.log(res.data);
//                     const list = res.data.data;
//                     const html = template('articleLists', { list });
//                     $('.table-hover tbody').html(html)
//                 })
//             })
//         })
//     }
//     paginationList();
// })